<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-form ref="otherRef" label-width="200px" :model="siteConfig" :rules="rules">
        <el-form-item label="场地(普通)可预定天数" prop="normalOrderNum">
          <el-input v-model="siteConfig.normalOrderNumShow" type="number" class="w50" :disabled="siteConfig.isCanOrder=='0'">
            <template #append>
              天
            </template>
          </el-input>
          <el-radio-group v-model="siteConfig.isCanOrder" class="ml20">
            <el-radio-button label="1">开启</el-radio-button>
            <el-radio-button label="0">关闭</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="场地(会员)可预定天数" prop="memberOrderNum">
          <el-input v-model="siteConfig.memberOrderNumShow" type="number" class="w50" :disabled="siteConfig.isCanOrderVip=='0'">
            <template #append>
              天
            </template>
          </el-input>
          <el-radio-group v-model="siteConfig.isCanOrderVip" class="ml20">
            <el-radio-button label="1">开启</el-radio-button>
            <el-radio-button label="0">关闭</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="场地(普通)可预定时间" prop="normalOrderPeriod">
          <el-time-select
            v-model="siteConfig.normalOrderPeriodStart"
            :max-time="siteConfig.normalOrderPeriodEnd"
            class="mr-4"
            placeholder="00:00"
            :start="venStore.businessPeriod[0]"
            :end="venStore.businessPeriod[1]"
          />
          至
          <el-time-select
            v-model="siteConfig.normalOrderPeriodEnd"
            :min-time="siteConfig.normalOrderPeriodStart"
            class="mr-4"
            placeholder="00:00"
            :start="venStore.businessPeriod[0]"
            :end="venStore.businessPeriod[1]"
          />
        </el-form-item>
        <el-form-item label="场地(会员)可预定时间" prop="memberOrderPeriod">
          <el-time-select
            v-model="siteConfig.memberOrderPeriodStart"
            :max-time="siteConfig.memberOrderPeriodEnd"
            class="mr-4"
            placeholder="00:00"
            :start="venStore.businessPeriod[0]"
            :end="venStore.businessPeriod[1]"
          />
          至
          <el-time-select
            v-model="siteConfig.memberOrderPeriodEnd"
            :min-time="siteConfig.memberOrderPeriodStart"
            class="mr-4"
            placeholder="00:00"
            :start="venStore.businessPeriod[0]"
            :end="venStore.businessPeriod[1]"
          />
        </el-form-item>
        <el-form-item label="开启用户订单评价">
          <el-switch
            v-model="siteConfig.commentFlag" active-color="#13ce66" inactive-color="#ddd" 
            active-value="1" inactive-value="0"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="mt20" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="20" :offset="1">
      <tuiding />
    </el-col>
  </el-row>
</template>

<script setup>
import { reactive } from 'vue'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import { getVenueOther, venueOtherEdit } from '@/api/ven/index'
import { toRefs } from '@vueuse/shared'
import tuiding from '@/views/oam/base/tuiding/index'
import useUserStore from '../../../../../store/modules/user'
import useVenStore from '../../../../../store/modules/ven'


const venueId = useUserStore().user.venueId
const venStore = useVenStore()
const { proxy } = getCurrentInstance()
const data = reactive({
  rules: {
    normalOrderNum: {
      validator: (rule, value, callback) => {
        if (siteConfig.value.isCanOrder === '1' && !siteConfig.value.normalOrderNumShow) {
          callback('必填')
        } else {
          callback()
        }
      },
      required: true
    },
    memberOrderNum: {
      validator: (rule, value, callback) => {
        if (siteConfig.value.isCanOrderVip === '1' && !siteConfig.value.memberOrderNumShow) {
          callback('必填')
        } else {
          callback()
        }
      },
      required: true
    },
    normalOrderPeriod: {
      validator: (rule, value, callback) => {
        if (!siteConfig.value.normalOrderPeriodStart || !siteConfig.value.normalOrderPeriodEnd) {
          callback('必填')
        } else {
          callback()
        }
      },
      required: true
    },
    memberOrderPeriod: {
      validator: (rule, value, callback) => {
        if (!siteConfig.value.memberOrderPeriodStart || !siteConfig.value.memberOrderPeriodEnd) {
          callback('必填')
        } else {
          callback()
        }
      },
      required: true
    }
  },
  siteConfig: {}
})
const { rules, siteConfig } = toRefs(data)

onMounted(() => {
  getData()
})

function getData() {
  getVenueOther().then(res => {
    const data = res.data
    if (!data.normalOrderNum || data.normalOrderNum == -1) {
      data.isCanOrder = '0'
      data.normalOrderNumShow = ''
    } else {
      data.isCanOrder = '1'
      data.normalOrderNumShow = data.normalOrderNum
    }

    if (!data.memberOrderNum || data.memberOrderNum == -1) {
      data.isCanOrderVip = '0'
      data.memberOrderNumShow = ''
    } else {
      data.isCanOrderVip = '1'
      data.memberOrderNumShow = data.memberOrderNum
    }
    
    if (data.normalOrderPeriod) {
      data.normalOrderPeriodStart = data.normalOrderPeriod.split(',')[0]
      data.normalOrderPeriodEnd = data.normalOrderPeriod.split(',')[1]
    }
    if (data.memberOrderPeriod) {
      data.memberOrderPeriodStart = data.memberOrderPeriod.split(',')[0]
      data.memberOrderPeriodEnd = data.memberOrderPeriod.split(',')[1]
    }

    siteConfig.value = data
  })
}

function save() {
  proxy.$refs['otherRef'].validate((valid) => {
    if (valid) {
      if (siteConfig.value.isCanOrder === '0') {
        siteConfig.value.normalOrderNum = -1
      } else {
        siteConfig.value.normalOrderNum = siteConfig.value.normalOrderNumShow
      }
      if (siteConfig.value.isCanOrderVip === '0') {
        siteConfig.value.memberOrderNum = -1
      } else {
        siteConfig.value.memberOrderNum = siteConfig.value.memberOrderNumShow
      }
      siteConfig.value.normalOrderPeriod = [siteConfig.value.normalOrderPeriodStart, siteConfig.value.normalOrderPeriodEnd].join(',')
      siteConfig.value.memberOrderPeriod = [siteConfig.value.memberOrderPeriodStart, siteConfig.value.memberOrderPeriodEnd].join(',')
      siteConfig.value.venueId = venueId

      venueOtherEdit(siteConfig.value).then(() => {
        proxy.$modal.msgSuccess('修改成功')
      })
    } 
  })
}

</script>

<style scoped>
.w50 {
	width: 50%;
}
.el-select .el-input {
	width: 130px;
}
.input-with-select .el-input-group__prepend {
	background-color: #fff;
}

</style>
